<template>
  <div class="sidebar-container">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      :collapse="!appStore.sidebar.opened"
      mode="vertical"
      :collapse-transition="false"
    >
      <el-menu-item index="1" @click="goTo('/')">
        <el-icon><Odometer /></el-icon>
        <template #title>Dashboard</template>
      </el-menu-item>
      
      <el-sub-menu index="2">
        <template #title>
          <el-icon><Location /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="2-1" @click="goTo('/users')">用户管理</el-menu-item>
        <el-menu-item index="2-2" @click="goTo('/roles')">角色管理</el-menu-item>
        <el-menu-item index="2-3" @click="goTo('/permissions')">权限管理</el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>内容管理</span>
        </template>
        <el-menu-item index="3-1" @click="goTo('/articles')">文章管理</el-menu-item>
        <el-menu-item index="3-2" @click="goTo('/categories')">分类管理</el-menu-item>
      </el-sub-menu>
      
      <!-- 设备管理 -->
      <el-sub-menu index="4">
        <template #title>
          <el-icon><Microphone /></el-icon>
          <span>设备管理</span>
        </template>
        <el-menu-item index="4-1" @click="goTo('/devices')">设备列表</el-menu-item>
      </el-sub-menu>
      
      <!-- 会议管理 -->
      <el-sub-menu index="5">
        <template #title>
          <el-icon><VideoCamera /></el-icon>
          <span>会议管理</span>
        </template>
        <el-menu-item index="5-1" @click="goTo('/meetings')">会议列表</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '../stores/app'
import { Odometer, Location, Document, Microphone, VideoCamera } from '@element-plus/icons-vue'

export default {
  name: 'Sidebar',
  components: {
    Odometer,
    Location,
    Document,
    Microphone,
    VideoCamera
  },
  setup() {
    const appStore = useAppStore()
    const route = useRoute()
    const router = useRouter()
    
    const activeMenu = ref(route.path)
    
    const goTo = (path) => {
      router.push(path)
    }
    
    return {
      appStore,
      activeMenu,
      goTo
    }
  }
}
</script>

<style scoped>
.sidebar-container {
  height: 100%;
}

.el-menu-vertical-demo {
  border-right: none;
  height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>